<template>
  <div>
    <el-tree
      :props="{
        label: 'criName',
        value: 'criCode',
      }"
      ref="tree"
      node-key="criCode"
      :default-expanded-keys="defaultExpandedKeys"
      :load="loadNode"
      lazy
      show-checkbox
      @check="handleCheck">
    </el-tree>
  </div>

</template>

<script>
import { province } from '@/api/servDept'

export default {
  name: 'MultipleAddress',
  data () {
    return {
      prodReleaseAreaList: [],
      defaultExpandedKeys: [],
      filterCode: ['110100', '120100', '310100', '500100']
    }
  },
  methods: {
    // 设置选中的城市code
    setDefValue (prodReleaseAreaList) {
      const setCheckedKeys = []
      prodReleaseAreaList.map((item) => {
        const { provCode, cityCode, countyCode } = item
        if (provCode) {
          this.defaultExpandedKeys.push(provCode)
        }
        if (cityCode) {
          this.defaultExpandedKeys.push(cityCode)
        }
        if (countyCode) {
          this.defaultExpandedKeys.push(countyCode)
        }

        setCheckedKeys.push(countyCode || cityCode || provCode)
      })
      this.$refs.tree.setCheckedKeys(setCheckedKeys)
      this.prodReleaseAreaList = prodReleaseAreaList
    },
    // 获取选中城市code和城市名
    getProdReleaseAreaList () {
      const filterAreaList = []
      this.prodReleaseAreaList.map((item) => {
        if (!this.filterCode.includes(item.criCode)) {
          filterAreaList.push(item)
        }
      })
      return filterAreaList
    },
    handleCheck (data, checkedKeys) {
      this.prodReleaseAreaList = checkedKeys.checkedNodes
    },
    loadNode (node, resolve) {
      if (node.level === 0) {
        return province({ code: '', level: 1 }).then(res => {
          resolve(res.data.map((item) => {
            return {
              ...item,
              provName: item.criName,
              provCode: item.criCode
            }
          }))
        })
      }
      if (node.level > 2) return resolve([])

      province({ code: node.data.criCode, level: node.level + 1 }).then(res => {
        if (node.level === 1) {
          res.data = res.data.map((item) => {
            return {
              ...item,
              provName: node.data.provName,
              provCode: node.data.provCode,
              cityName: item.criName,
              cityCode: item.criCode
            }
          })
        }
        if (node.level === 2) {
          res.data = res.data.map((item) => {
            return {
              ...item,
              provName: node.data.provName,
              provCode: node.data.provCode,
              cityName: node.data.cityName,
              cityCode: node.data.cityCode,
              countyName: item.criName,
              countyCode: item.criCode
            }
          })
        }
        return resolve(res.data)
      })
    },
    reset () {
      this.prodReleaseAreaList = [{
        provName: '',
        provCode: '',
        cityName: '',
        cityCode: '',
        countyName: '',
        countyCode: ''
      }]
    }

  }
}
</script>
<style scoped>
  .input-width {
    width: 80%;
  }
</style>
